<template>
  <div>
    <el-table
        :data="tagList"
        style="width: 100%">

      <!--      修改-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form  class="demo-table-expand" label-width="120px" style="font-size: 80%;">
            <el-input v-model="props.row.id" v-show="false"></el-input>
            <el-form-item :label="$t('problemMode.tagsName')" style="width: 450px;">
              <el-input v-model="props.row.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('problemMode.color')" style="width: 450px;">
              <el-color-picker v-model="props.row.color"></el-color-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="saveOrUpdate(props.row)" size="min">{{$t('save')}}</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="ID" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.id" :title="scope.row.id">{{scope.row.id.substring(0,10)}}</div>
        </template>
      </el-table-column>

      <el-table-column
          prop="name"
          :label="$t('problemMode.tags')" >
        <template slot-scope="scope">
          <el-tag type="" :color="scope.row.color" style="color: #ffffff">
            {{scope.row.name}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          prop="updateTime"
          :label="$t('updateTime')" width="200">
        <template slot-scope="scope">
          <div style="color: grey">{{scope.row.updateTime}}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('problemMode.operation.index')" width="120" >
        <template slot-scope="scope">
          <div v-if="scope.row.id">
            <!--            <el-link v-if="scope.row.type==0"  type="success" @click="update(scope.row)"  size="small" >{{$t('problemMode.case.table.lookData')}}</el-link>-->
            <el-link  style="margin-left: 10px;" type="danger" @click="deleteAuth(scope.row)"  size="small" >{{$t('delete')}}</el-link>
          </div>
          <div v-else>
            <!--            <el-link v-if="scope.row.type==0"  type="success" @click="update(scope.row)"  size="small" >{{$t('problemMode.case.table.lookData')}}</el-link>-->
            <el-link   style="margin-left: 10px;" type="danger"   size="small" >{{ $t('NotSave') }}</el-link>
          </div>

          <!-- <el-button @click="update(scope.row)" type="warning" size="small">{{ $t('problemMode.operation.update') }}</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-button type="primary" @click="addTagUp" style="width:98%;margin-left: 0.5%;margin-top: 10px;" plain> + {{ $t('add')+$t('problemMode.tags') }}</el-button>
  </div>
</template>

<script>
import * as problemApi from '@/api/problem'
export default {
  name: "tag",
  data() {
    return {
      tagList:[],
      newData:{
        color:'',
        name:'',
      }
    }
  },
  methods:{
    getList(){
      problemApi.getTagList().then(res=>{
        this.tagList = res.data.data;
      })
    },
    addTagUp(){
      this.tagList.push({"color":'',"name":''});
    },
    deleteAuth(row){ // 删除
      if(row.id){   //存在数据
        this.$confirm("是否删除该 "+row.name+" 标签", this.$t('prompt'), { confirmButtonText: this.$t('save'), cancelButtonText: this.$t('cancel'), type: 'warning' }).then(() => {
          problemApi.deleteTag({"id":row.id}).then(res=>{
            if(res.data.success){
              this.$message({type: 'success',message: '删除成功!'});
              this.getList();
            }
          })
        })
      }else{
        this.$message({"type":"warning",message:"未选择数据"})
      }

    },
    saveOrUpdate(data){
      if(data.id){  //修改
        problemApi.updateTag(data).then(res=>{
          if(res.data.success){
            this.$message({"type":"success",message:this.$t('update')+this.$t('success')})
            this.getList();
          }
        })
      }else{
        problemApi.saveTag(data).then(res=>{
          if(res.data.success){
            this.$message({"type":"success",message:this.$t('add')+this.$t('success')})
            this.getList();
          }
        })
      }
    },

  },
  created() {
    this.getList();
  }

}
</script>

<style scoped>

</style>
